<template>
	<view>
		<!-- tabs -->
		<u-sticky offset-top="0">
			<view class="tabWrapper">
				<text :class="{active : page == index}" v-for="(item, index) in tabs" :key="index"
					@click="changeTab(index)">{{item}}</text>
			</view>
		</u-sticky>
		

		<!-- 取车内容 -->
		<view class="checkCarWrapper" v-if="page == 0">
			<view v-if="takeCheckInfoVo != null">
				<view class="albumBox" v-if="takecsUrl.length > 0">
					<text>车身图片</text>
					<u-album :urls="takecsUrl"></u-album>
				</view>
				<view class="albumBox" v-if="takeybpUrl.length > 0">
					<text>仪表盘/油表照片</text>
					<u-album :urls="takeybpUrl"></u-album>
				</view>
				<view class="albumBox" v-if="takensUrl.length > 0">
					<text>车辆内饰照片</text>
					<u-album :urls="takensUrl"></u-album>
				</view>
				<view class="albumBox" v-if="takehhUrl.length > 0">
					<text>车辆划痕照片</text>
					<u-album :urls="takehhUrl"></u-album>
				</view>
				<view class="basicInfoItem">
					<text>车辆油量:</text>
					<text>{{takeCheckInfoVo.fuelCapacity|filterNull}}</text>
				</view>
				<view class="basicInfoItem">
					<text>车辆公里数:</text>
					<text>{{takeCheckInfoVo.vehicleMileage|filterNull}}</text>
				</view>
				<view class="basicInfoItem">
					<text>车辆随身物品:</text>
					<view class="carThing" v-if="takeCheckInfoVo.accessoryItemList != null">
						<text v-for="(item, index) in takeCheckInfoVo.accessoryItemList" :key="index">{{item}}</text>
					</view>
				</view>
				<view class="basicInfoItem">
					<text>取车时间:</text>
					<text>{{takeCheckInfoVo.takeAlsoTime|filterNull}}</text>
				</view>
				<view class="basicInfoItem">
					<text>处理人:</text>
					<text>{{takeCheckInfoVo.conductor|filterNull}}</text>
				</view>
				<view class="basicInfoItem">
					<text>备注:</text>
					<text>{{takeCheckInfoVo.remark|filterNull}}</text>
				</view>
			</view>
			<view v-else>
				<u-empty marginTop="20"></u-empty>
			</view>
		</view>


        <!-- 还车内容 -->
        <view class="checkCarWrapper" v-if="page == 1">
			<view v-if="alsoCheckInfoVo != null">
				<view class="albumBox" v-if="returncsUrl.length > 0">
					<text>车身图片</text>
					<u-album :urls="returncsUrl"></u-album>
				</view>
				<view class="albumBox" v-if="returnybpUrl.length > 0">
					<text>仪表盘/油表照片</text>
					<u-album :urls="returnybpUrl"></u-album>
				</view>
				<view class="albumBox" v-if="returnnsUrl.length > 0">
					<text>车辆内饰照片</text>
					<u-album :urls="returnnsUrl"></u-album>
				</view>
				<view class="albumBox" v-if="returnhhUrl.length > 0">
					<text>车辆划痕照片</text>
					<u-album :urls="returnhhUrl"></u-album>
				</view>
				<view class="albumBox" v-if="returnkhUrl.length > 0">
					<text>客户签字</text>
					<u-album :urls="returnkhUrl"></u-album>
				</view>
				<view class="basicInfoItem">
					<text>车辆油量:</text>
					<text>{{alsoCheckInfoVo.fuelCapacity|filterNull}}</text>
				</view>
				<view class="basicInfoItem">
					<text>车辆公里数:</text>
					<text>{{alsoCheckInfoVo.vehicleMileage|filterNull}}</text>
				</view>
				<view class="basicInfoItem">
					<text>车辆随身物品:</text>
					<view class="carThing" v-if="alsoCheckInfoVo.accessoryItemList != null">
						<text v-for="(item, index) in alsoCheckInfoVo.accessoryItemList" :key="index">{{item}}</text>
					</view>
				</view>
				<view class="basicInfoItem">
					<text>还车时间:</text>
					<text>{{alsoCheckInfoVo.takeAlsoTime|filterNull}}</text>
				</view>
				<view class="basicInfoItem" v-if="false">
					<text>补充油费:</text>
					<text>{{alsoCheckInfoVo.lkosten|filterNull}}</text>
				</view>
				<view class="basicInfoItem">
					<text>处理人:</text>
					<text>{{alsoCheckInfoVo.conductor|filterNull}}</text>
				</view>
				<view class="basicInfoItem">
					<text>备注:</text>
					<text>{{alsoCheckInfoVo.remark|filterNull}}</text>
				</view>
			</view>
        	<view v-else>
				<u-empty marginTop="20"></u-empty>
			</view>
        </view>

	</view>
</template>

<script>
	import {
		vehicleExaminationDocuments,
		luxuryOrderVehicleExaminationDocuments
	} from '@/api/order-api.js'
	import {
		longOrdervehicleExaminationDocuments
	}from '@/api/longOrder-api.js'
	import setting from '@/settings.js'
	export default {
		data() {
			return {
				type : 1,
				tabs: ['取车验车单', '还车验车单'],
				page: 0,
				orderNo: '',
				checkInfo : {},
				takeCheckInfoVo: null,
				alsoCheckInfoVo: null,
			}
		},
		computed: {
			takecsUrl() {
				if(!this.$u.test.isEmpty(this.takeCheckInfoVo)) {
					return this.getPathOfUrl(this.takeCheckInfoVo.csUrl);
				}else {
					return [];
				}
			   
			},
			takeybpUrl() {
				if(!this.$u.test.isEmpty(this.takeCheckInfoVo)) {
					return this.getPathOfUrl(this.takeCheckInfoVo.ybpUrl);
				}else {
					return [];
				}
				
			},
			takensUrl() {
				if(!this.$u.test.isEmpty(this.takeCheckInfoVo)) {
					return this.getPathOfUrl(this.takeCheckInfoVo.nsUrl);
				}else {
					return [];
				}
				
			},
			takehhUrl() {
				if(!this.$u.test.isEmpty(this.takeCheckInfoVo)) {
					return this.getPathOfUrl(this.takeCheckInfoVo.hhUrl);
				}else {
					return [];
				}
				
			},
			returncsUrl() {
				if(!this.$u.test.isEmpty(this.alsoCheckInfoVo)) {
					return this.getPathOfUrl(this.alsoCheckInfoVo.csUrl);
				}else {
					return [];
				}
			   
			},
			returnybpUrl() {
				if(!this.$u.test.isEmpty(this.alsoCheckInfoVo)) {
					return this.getPathOfUrl(this.alsoCheckInfoVo.ybpUrl);
				}else {
					return [];
				}
				
			},
			returnnsUrl() {
				if(!this.$u.test.isEmpty(this.alsoCheckInfoVo)) {
					return this.getPathOfUrl(this.alsoCheckInfoVo.nsUrl);
				}else {
					return []
				}
				
			},
			returnhhUrl() {
				if(!this.$u.test.isEmpty(this.alsoCheckInfoVo)) {
					return this.getPathOfUrl(this.alsoCheckInfoVo.hhUrl);
				}else {
					return [];
				}
				
			},
			returnkhUrl() {
				if(!this.$u.test.isEmpty(this.alsoCheckInfoVo)) {
					if(this.alsoCheckInfoVo.khUrl != null) {
						let khUrl = this.alsoCheckInfoVo.khUrl.split(',');
						return this.getPathOfUrl(khUrl);
					}else {
						return [];
					}
					
				}else {
					return [];
				}
				
			}
		},
		onLoad(op) {
			this.type = op.type;
			this.orderNo = op.orderNo;
			this.getVehicleExaminationDocuments();
			
		},
		
		methods: {
			changeTab(index) {
				this.page = index;
			},
			//将图片路径转换为Url;
            getPathOfUrl(paths) {
				var result = [];
				if(paths != null) {
					for (let path of paths) {
						let url = setting.baseImageUrl + path;
						result.push(url);
					}
				}
				
				return result;
			},
			//获取验车单数据
			getVehicleExaminationDocuments() {
				uni.showLoading({
					title: '加载中...'
				})
				
				if(this.type == 1) {//短租
					vehicleExaminationDocuments({
						orderNo: this.orderNo
					}).then(res => {
						uni.hideLoading();
						this.checkInfo = res.data;
						this.dealData();
					})
				}else if(this.type == 2) {//长租
					longOrdervehicleExaminationDocuments({
						orderNo: this.orderNo
					}).then(res => {
						uni.hideLoading();
						this.checkInfo = res.data;
						this.dealData();		
					})
				}else if(this.type == 3) {//豪车
					luxuryOrderVehicleExaminationDocuments({
						orderNo: this.orderNo
					}).then(res => {
						uni.hideLoading();
						this.checkInfo = res.data;
						this.dealData();
					})
				}
			},
			// 数据处理
			dealData(){
				if(this.checkInfo.takeCheckInfoVo) {
					this.takeCheckInfoVo = this.checkInfo.takeCheckInfoVo;
					if(this.takeCheckInfoVo.accessoryItems != null) {
						this.takeCheckInfoVo.accessoryItemList = this.takeCheckInfoVo.accessoryItems.split(',');
					}
					
				}
				if(this.checkInfo.alsoCheckInfoVo) {
					this.alsoCheckInfoVo = this.checkInfo.alsoCheckInfoVo;
					if(this.alsoCheckInfoVo.accessoryItems != null) {
						this.alsoCheckInfoVo.accessoryItemList = this.alsoCheckInfoVo.accessoryItems.split(',');
					}
					
				}	
			}	
		}
	}
</script>

<style lang="scss" scoped>
	.tabWrapper {
		position: sticky;
		height: 90upx;
		width: 100%;
		background-color: #f5f5f5;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
      
		text {
			width: 100%;
			display: inline-block;
			height: 90upx;
			line-height: 90upx;
			text-align: center;
			color: $text-color-99;
			font-size: 28upx;
			font-weight: bold;

			&.active {
				color: $main-color;
			}
		}
	}

	.checkCarWrapper {
		margin: 10upx 20upx;
		padding: 38upx 28upx;
		border-radius: 16upx;
		background-color: $bg-white-color;
		overflow: hidden;
		.albumBox {
			text {
				color: $text-color-33;
				font-size: 24upx;
				font-weight: bold;
				margin-bottom: 20upx;
			}
		}
		.basicInfoItem {
			text{
				color: $text-color-66;
				font-size: 22upx;
			}
			text:nth-child(2) {
				color: $text-color-33;
				margin-left: 16upx;
			}
		     
		}
		.carThing {
			text {
				padding: 0 20upx;
				height: 48upx;
				line-height: 48upx;
				text-align: center;
				border-radius: 6upx;
				background-color: #f3f3f3;
				color: $text-color-33;
				margin-right: 20upx;
			}
		}
	}
</style>
